<template>
  <div class="notes-wrapper">
    <div v-if="selectedNote" class="notes-detail">
      <NoteDetail 
        :note="selectedNote" 
        @edit-note="handleEditNote"
        @back-to-list="handleBackToList"
        @note-updated="handleNoteUpdated"
        @view-note="handleViewNote"
      />
    </div>

    <div v-else class="notes-empty">
      <div class="notes-empty-head">
        <h2>最近笔记</h2>
      </div>

      <div class="notes-grid">
        <article
          v-for="note in rootNotes"
          :key="note.id"
          class="note-card"
          @click="handleCardClick(note)"
        >
          <header class="note-card-head">
            <h3>{{ note.name || '未命名笔记' }}</h3>
            <span>{{ formatDate(note.updated_at) }}</span>
          </header>
          <p class="note-card-content">
            {{ (note.content && note.content.slice(0, 160)) || '无内容' }}
          </p>
        </article>
      </div>
    </div>
  </div>
</template>

<script setup>
import NoteDetail from './NoteDetail.vue';

const props = defineProps({
  selectedNote: Object,
  rootNotes: { type: Array, default: () => [] },
  isMobile: Boolean,
  onToggleSidebar: Function,
  onNoteClick: Function,
  onEditNote: Function,
  onBackToList: Function,
  onNoteUpdated: Function,
});

function handleCardClick(note) {
  props.onNoteClick && props.onNoteClick(note);
  if (props.isMobile && props.onToggleSidebar) {
    props.onToggleSidebar();
  }
}

function handleViewNote(note) {
  // 查看子笔记详情，和onNoteClick行为一致
  props.onNoteClick && props.onNoteClick(note);
}

function handleEditNote(note) {
  props.onEditNote && props.onEditNote(note);
}

function handleBackToList() {
  props.onBackToList && props.onBackToList();
}

function handleNoteUpdated() {
  props.onNoteUpdated && props.onNoteUpdated();
}

function formatDate(dateString) {
  if (!dateString) return '';
  const d = new Date(dateString);
  const mm = String(d.getMonth() + 1).padStart(2, '0');
  const dd = String(d.getDate()).padStart(2, '0');
  return `${mm}-${dd}`;
}
</script>

<style scoped>
.notes-wrapper {
  min-height: 100%;
}

.notes-detail {
  background: transparent;
}

.notes-empty {
  max-width: 900px;
  padding: 32px;
}

.notes-empty-head {
  margin-bottom: 24px;
}

.notes-empty-head h2 {
  font-size: 24px;
  color: #2f3a5a;
  margin-bottom: 8px;
}

.notes-empty-head p {
  color: #7b86a4;
  font-size: 14px;
}

.notes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.note-card {
  padding: 20px;
  border-radius: 16px;
  border: 1px solid rgba(207, 215, 235, 0.9);
  background: #f9fbff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.note-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.12);
}

.note-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.note-card-head h3 {
  font-size: 16px;
  color: #2f3a5a;
  font-weight: 600;
  margin-right: 12px;
}

.note-card-head span {
  font-size: 12px;
  color: #a0aac5;
}

.note-card-content {
  font-size: 14px;
  color: #55607b;
  min-height: 48px;
}

@media (max-width: 768px) {
  .notes-wrapper {
    padding: 20px 16px;
  }

  .notes-empty {
    padding: 24px;
  }
}
</style>
